<template>
  <div class="app-container">
    <!-- <search @search="handleGetData" /> -->
    <div class="search-content">
      <el-form ref="search" :model="search" inline label-width="100px">
        <div class="line-one">
          <el-form-item label="模板名称">
            <el-input v-model="search.roleName" placeholder="请输入模板名称" style="width: 200px" />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="search.createStartDate"
              type="date"
              placeholder="开始时间"
              value-format="yyyy-MM-dd"
              style="width: 200px"
            />
            <span class="gap">至</span>
            <el-date-picker
              v-model="search.createEndDate"
              type="date"
              placeholder="结束时间"
              value-format="yyyy-MM-dd"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="发送时间">
            <el-date-picker
              v-model="search.startPushDate"
              type="date"
              placeholder="开始时间"
              value-format="yyyy-MM-dd"
              style="width: 200px"
            />
            <span class="gap">至</span>
            <el-date-picker
              v-model="search.endPushDate"
              type="date"
              placeholder="结束时间"
              value-format="yyyy-MM-dd"
              style="width: 200px"
            />
          </el-form-item>
        </div>
        <div class="line-two">
          <el-form-item label="发送状态">
            <el-select v-model="search.pushStatus" placeholder="发送状态">
              <el-option
                v-for="pushStatus of pushStatusList"
                :key="pushStatus.text"
                :label="pushStatus.text"
                :value="pushStatus.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin-left: 10px" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="list-wrapper">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="4">
          <div class="grid-content title">礼券发放列表</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-button type="primary" style="float: right;" @click="handleAdd">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="couponList"
        border
        style="width: 100%;margin-top: 20px;"
      >
        <el-table-column
          prop="id"
          label="编号"
        />
        <el-table-column
          prop="creater"
          label="创建人"
        />
        <el-table-column
          prop="roleName"
          label="模板名"
        />
        <!-- <el-table-column
          prop="coupon"
          label="礼券类型"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.coupon.promotion === '00'">满减</span>
            <span v-if="scope.row.coupon.promotion === '01'">折扣</span>
            <span v-if="scope.row.coupon.promotion === '02'">赠品</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="createTime"
          label="创建日期"
        />
        <el-table-column
          prop="pushDate"
          label="发送日期"
        />
        <el-table-column
          prop="updateTime"
          label="更新日期"
        />
        <el-table-column
          prop="statisticsDeadline"
          label="统计截止日期"
        />
        <el-table-column
          prop="labelUsersCount"
          label="标签用户数"
        />
        <!-- <el-table-column
          prop="pushACount"
          label="A组"
        /> -->
        <!-- <el-table-column
          prop="pushBCount"
          label="B组"
        /> -->
        <el-table-column
          prop="pushUsersCount"
          label="实际发送数"
        />
        <el-table-column
          prop="receiveUsersCount"
          label="回收数量"
        />
        <el-table-column
          prop="state"
          label="发送状态"
        />
        <el-table-column
          label="操作"
          prop="pushStatus"
          width="280"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              plain
              @click="handleViewSchedule(scope.row)"
            >
              查询进度
            </el-button>
            <el-button
              v-if="scope.row.pushStatus === '00'"
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-if="false"
              type="primary"
              size="mini"
              plain
              @click="handleViewDetail(scope.row)"
            >
              查看
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
            <el-button
              type="info"
              size="mini"
              plain
              @click="handleGetUsed(scope.row)"
            >
              复用规则
            </el-button>
            <el-button
              type="primary"
              size="mini"
              @click="handleViewReminder(scope.row)"
            >
              任务提醒
            </el-button>
          </template>
          <!-- 点击删除按钮提示框 -->

        </el-table-column>
      </el-table>
      <el-row>
        <el-col>
          <el-pagination
            layout="prev, pager, next"
            :total="totalSize"
            @current-change="handleChangePage"
          />
        </el-col>
      </el-row>
      <el-dialog
        title="提示"
        :visible.sync="deleteVisible"
        width="30%"
        :before-close="handleCloseDelete"
      >
        <span>确认删除本条数据？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirmDelete">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 查看店长明细 -->
    <send-detail
      :detail-visible="detailVisible"
      :detail-list="detailList"
      @closeDetail="handleCloseDetail"
    />
    <!-- 查询推送进度 -->
    <progress-detail
      :detail-visible="scheduleVisible"
      :detail-list="scheduleList"
      @closeDetail="handleCloseSchedule"
    />
    <!-- 提醒明细 -->
    <task-reminder
      :detail-visible="reminderVisible"
      :detail-list="reminderList"
      @closeReminder="handleCloseReminder"
    />
  </div>
</template>

<script>
import { getTemplateList, getDeleteTemplate, getRoleSchedule, getSenderInfo } from '@/api/coupon/template'
import sendDetail from './module/sendDetail.vue'
import progressDetail from './module/progressDetail.vue'
import taskReminder from './module/taskReminder.vue'
export default {
  name: 'CouponList',
  components: { sendDetail, progressDetail, taskReminder },
  data() {
    return {
      pushStatusList: [
        {
          text: '全部',
          value: ''
        },
        {
          text: '等待中',
          value: '00'
        },
        {
          text: '发送成功',
          value: '01'
        },
        {
          text: '发送失败',
          value: '02'
        }
      ],
      loading: false,
      deleteVisible: false,
      totalSize: 0,
      couponList: [],
      /* 查询参数 */
      search: {
        roleName: '',
        createStartDate: '',
        createEndDate: '',
        startPushDate: '',
        endPushDate: '',
        pushStatus: ''
      },
      pageNum: 1,
      pageSize: 10,
      /* 删除 */
      roleIds: [],
      /* 推送店长明细查看 */
      detailVisible: false,
      detailList: [],
      /* 推送进度查看 */
      scheduleVisible: false,
      scheduleList: [],
      /* 推送提醒查看 */
      reminderVisible: false,
      reminderList: []
    }
  },
  mounted() {
    this.getTemplateList()
  },
  methods: {
    /**
     * 设置表头和表格内容居中
     */
    rowStyle() {
      return 'text-align: center'
    },
    headerStyle() {
      return 'text-align: center'
    },
    // 获取礼券发送列表
    async getTemplateList() {
      const { pageNum, pageSize, search } = this
      const { roleName, createStartDate, createEndDate, startPushDate, endPushDate, pushStatus } = search
      const queryParamMap = {}
      if (pushStatus) {
        queryParamMap.pushStatus = pushStatus
      }
      if (roleName) {
        queryParamMap.roleName = roleName
      }
      if (createStartDate) {
        queryParamMap.createStartDate = createStartDate
      }
      if (createEndDate) {
        queryParamMap.createEndDate = createEndDate + ' 23:59:59'
      }
      if (startPushDate) {
        queryParamMap.startPushDate = startPushDate
      }
      if (endPushDate) {
        queryParamMap.endPushDate = endPushDate
      }
      const requestData = {
        pageNum,
        pageSize,
        queryParamMap
      }
      console.log(requestData)
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 5000)
      const templateRes = await getTemplateList(requestData)
      this.loading = false
      console.log('templateRes', templateRes)
      this.totalSize = templateRes.totalSize
      this.couponList = templateRes.content
    },
    handleAdd() {
      this.$router.push({
        name: 'CouponSetting',
        params: {
          editType: '03'
        }
      })
    },
    handleGetData(val) {
      console.log(val)
    },
    /**
     * 对表格执行 编辑 查看 删除 操作
     */
    handleEdit(row) {
      const { roleId, id } = row
      this.$router.push({
        name: 'CouponSetting',
        params: {
          editType: '01',
          id,
          roleId
        }
      })
    },
    /* 查看推送店长明细 */
    async handleViewDetail(row) {
      const { roleId, id } = row
      console.log(roleId, id)
      this.detailVisible = true
      this.detailList = []
    },
    handleCloseDetail() {
      console.log('close')
      this.detailVisible = false
      this.detailList = []
    },
    /* 查询推送进度 */
    async handleViewSchedule(row) {
      const { roleId } = row
      console.log(roleId)
      const scheduleRes = await getRoleSchedule(roleId)
      this.scheduleVisible = true
      console.log(scheduleRes, 'scheduleRes')
      this.scheduleList = scheduleRes.template.scheduleList
    },
    handleCloseSchedule() {
      this.scheduleVisible = false
      this.scheduleList = []
    },
    /* 查看推送 */
    async handleViewReminder(row) {
      const { roleId } = row
      console.log(roleId)
      const requestData = {
        roleId
      }
      const senderRes = await getSenderInfo(requestData)
      console.log(senderRes)
      this.reminderList = senderRes.senderInfo
      this.reminderVisible = true
    },
    handleCloseReminder() {
      console.log('close reminder')
      this.reminderVisible = false
      this.reminderList = []
    },
    /* 复用规则 */
    handleGetUsed(row) {
      const { roleId, id } = row
      this.$router.push({
        name: 'CouponSetting',
        params: {
          editType: '02',
          id,
          roleId
        }
      })
    },
    handleDelete(row) {
      this.roleIds = [row.roleId]
      this.deleteVisible = true
    },
    async handleConfirmDelete() {
      const requestData = {
        roleIds: this.roleIds
      }
      await getDeleteTemplate(requestData)
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.deleteVisible = false
      if (this.pageNum > 1 && this.couponList.length === 1) {
        let pageNum = this.pageNum
        this.pageNum = pageNum--
      }
      this.getTemplateList()
    },
    /* 分页 */
    handleChangePage(num) {
      this.pageNum = num
      this.getTemplateList()
    },

    handleSearch() {
      this.getTemplateList()
    },

    handleCloseDelete() {
      this.deleteVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .search-content{
    width: 100%;
    border-radius: 6px;
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  }
  .list-wrapper{
    width: 100%;
    min-height: 90px;
    border-radius: 6px;
    background: #ffffff;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    .grid-content{
      &.title{
        font-weight: 600;
      }
    }
  }

  /* 按钮位置调整 */
  .cell button{
    margin-left: 0;
    margin-right: 10px;
  }
  .cell button:nth-of-type(n + 4) {
    margin-top: 6px;
  }
</style>
